<template>
	<view class="clsp-goods">
		<mescroll-uni v-if="scrollHeight" :height="scrollHeight" :fixed="false" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :bottom="100">
			<view :class="['goods-container', `goods-container-rectangle`]">
				<view class="goods-item" v-for="item,idx in goodsList" :key="item.id">

					<view class="goods">
						<view class="goods--rectangle flex-wrap">
							<view class="error-desc flex white p-10 m-b-20" v-if="item.error_type>0">
								<u-icon name="info-circle-fill" color="#fff" size="32" class="m-r-10"></u-icon>
								<view>
									{{item.error_desc}},{{$zhTran('已被下架,建议调整商品'+([1,2].indexOf(item.error_type)>-1?'价格':'服务费'))}}
								</view>
							</view>
							<view class="flex col-top" style="width: 100%;" @tap="checkGoods(idx)">
								<!-- 商品图片 -->
								<view class="goods-images">
									<u-image width="100%" height="100%" :src="item.goods.image" mode="aspectFit" />
									<u-checkbox class="img-box" :value="item.checked">
									</u-checkbox>
								</view>
								<!-- 商品信息 -->
								<view class="goods-content">
									<!-- 名称 -->
									<view class="goods-box goods-name line-2">
										<slot name="name">{{ item.goods.name }}</slot>
									</view>

								</view>
							</view>
							<view class="price-box flex row-between m-t-20">
								<view class="price-item strategy">
									<view class="price">{{price_symbol}}{{item.price_strategy.price}}</view>
									<view class="desc flex">
										<u-image width="30rpx" height="30rpx" :src="item.price_strategy.icon"
											mode="scaleToFill" class="m-r-10" />
										<text>{{item.price_strategy.price_title}}</text>
									</view>
								</view>
								<view class="price-item">
									<view class="price">{{price_symbol}}{{item.sell_price}}</view>
									<view class="desc">{{$zhTran('当前售价')}}</view>
								</view>
								<view class="price-item">
									<view class="price">{{price_symbol}}{{item.service_desc}}</view>
									<view class="desc">{{$zhTran('服务费')}}</view>
								</view>
							</view>

							<view class="profit p-20 m-t-20">
								<!-- 当前售价-成本+服务费=最终分润 -->
								{{$zhTran('分润')}}：<text>{{item.sell_price}}</text>-<text>{{item.cost}}</text>+<text>{{item.service_desc}}</text>=<text>{{item.profit}}</text>
							</view>
						</view>

						<view class="btn-box flex row-between">
							<view class="btn-item" @tap="editStatus(item.goods_id,item.status==1?0:1)">
								{{$zhTran(item.status?'上架':'下架')}}
							</view>
							<view class="btn-item" @tap="editPrice(item)">{{$zhTran('改价')}}</view>
							<button class="btn-item share flex row-center" :hover-stay-time="150" open-type="share"
								hover-class="none" :data-goodsId="item.goods_id" :data-name="item.goods.name"
								:data-image="item.goods.image">{{$zhTran('转发')}}</button>
						</view>
					</view>
				</view>

			</view>
		</mescroll-uni>
		<!-- 底部结算栏 -->
		<view class="footer flex bg-white row-between">
			<!-- left -->
			<view class="flex">
				<checkbox-group class="normal">
					<u-checkbox label-size="28rpx" @change="changeAllSelect('')" id="checkAll" value="all"
						v-model="isSelectedAll" :label-disabled="false" :disabled="selectAllDisabled">
						<text class="normal">{{$zhTran('全选')}}</text>
					</u-checkbox>
				</checkbox-group>
				<view v-if="goodsCheckedLength>0">{{$zhTran('已选')}}：<text
						style="color: rgba(64, 115, 250, 1);">{{goodsCheckedLength}}</text>{{$zhTran('个商品')}}</view>
			</view>
			<view class="right-btn lighter" @tap="batchEdit">{{$zhTran('批量操作')}}</view>
		</view>

		<u-popup v-model="showGoodsVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="showGoodsVisible=false">
			<view class="sort-box p-t-30">
				<view class="sort-main">
					<view class="sort-sel" @click="editStatus('',1)">{{$zhTran('批量上架')}}</view>
					<view class="sort-sel" @click="editStatus('',0)">{{$zhTran('批量下架')}}</view>
					<view class="sort-sel" @click="editPriceBatch">{{$zhTran('批量改价')}}</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showGoodsVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showPriceVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopPrice">
			<view class="pop-goods p-30">
				<view class="goods--rectangle flex-wrap">
					<view class="flex col-top" style="width: 100%;">
						<!-- 商品图片 -->
						<view class="goods-images">
							<u-image width="100%" height="100%" :src="form.image" mode="aspectFit" />
						</view>
						<!-- 商品信息 -->
						<view class="goods-content">
							<!-- 名称 -->
							<view class="goods-box goods-name line-2">
								<slot name="name">{{ form.name }}</slot>
							</view>

						</view>
					</view>
					<view class="price-box flex row-between m-t-20">
						<view class="price-item strategy">
							<view class="price">{{price_symbol}}{{form.price}}</view>
							<view class="desc flex">
								<u-image width="30rpx" height="30rpx" :src="form.icon" mode="scaleToFill"
									class="m-r-10" />
								<text>{{form.price_title}}</text>
							</view>
						</view>
						<view class="price-item">
							<view class="price">{{price_symbol}}{{form.sell_price}}</view>
							<view class="desc">{{$zhTran('当前售价')}}</view>
						</view>
						<view class="price-item">
							<view class="price">{{price_symbol}}{{form.service_desc}}</view>
							<view class="desc">{{$zhTran('服务费')}}</view>
						</view>
					</view>

					<view class="profit p-20 m-t-20">
						<!-- 当前售价-成本+服务费=最终分润 -->
						<!-- 当前售价-(当前售价 * 成本率)+服务费=最终分润 -->
						{{$zhTran('分润')}}：<text>{{form.sell_price}}</text>-<text>{{form.cost}}</text>+<text>{{form.service_desc}}</text>=<text>{{form.profit}}</text>
					</view>
				</view>
				<view class="m-t-20 bold">{{$zhTran('修改价格')}}</view>
				<view>
					<u-field v-model="form.sell_price_new" :label="$zhTran('当前售价')"
						:placeholder="$zhTran('请输入当前售价')"></u-field>
				</view>
				<view>
					<u-field v-model="form.service" :label="$zhTran('服务费')" :placeholder="$zhTran('请输入服务费')"></u-field>
				</view>
			</view>
			<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
			<view class="price-footer flex row-between p-20">
				<view class="btn btn--cancel" @tap="closePopPrice">{{$zhTran("取消")}}</view>
				<view class="btn btn--primary" @tap="saveNewPrice(1)">{{$zhTran('保存')}}</view>
			</view>
		</u-popup>

		<u-popup v-model="showBatchPriceVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopPrice">
			<view class="pop-batch-goods p-30">
				<view class="m-t-20 bold">{{$zhTran('当前售价批量修改')}}</view>
				<view class="radio-select">
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'price')" v-model="form.price.amount.checked"
							shape="circle" name="amount">{{$zhTran('调整售价幅度')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('price','amount')">
							<text>{{form.price.amount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.price.amount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 420rpx);"></u-field>
					</view>
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'price')" v-model="form.price.discount.checked"
							shape="circle" name="discount">{{$zhTran('调整售价百分比')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('price','discount')">
							<text>{{form.price.discount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.price.discount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 460rpx);"></u-field>
					</view>
				</view>
				<view class="m-t-20 bold">{{$zhTran('服务费修改')}}</view>
				<view class="radio-select">
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'service')"
							v-model="form.service.amount.checked" shape="circle" name="amount">{{$zhTran('调整售价幅度')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('service','amount')">
							<text>{{form.service.amount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.service.amount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 420rpx);"></u-field>
					</view>
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'service')"
							v-model="form.service.discount.checked" shape="circle"
							name="discount">{{$zhTran('调整售价百分比')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('service','discount')">
							<text>{{form.service.discount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.service.discount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 460rpx);"></u-field>
					</view>
				</view>
			</view>
			<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
			<view class="price-footer flex row-between p-20">
				<view class="btn btn--cancel" @tap="closePopPrice">{{$zhTran("取消")}}</view>
				<view class="btn btn--primary" @tap="saveBatchNewPrice(1)">{{$zhTran('保存')}}</view>
			</view>
		</u-popup>
		<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="updown_list" v-if="refreshKey" :safe-area-inset-bottom="true"></u-select>


		<u-modal v-model="showResult" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="$zhTran('关闭')" @cancel="showResult=false" cancel-color="rgba(38, 38, 38, 1)"
			border-radius="10" :show-confirm-button="false">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gou2.png')" width="300" height="300"
						mode="widthFix" v-if="alertRes.status"></u-image>
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix" v-else></u-image>
				</view>

				<view class="title m-t-20">{{alertRes.title}}</view>
				<view class="desc m-t-10">{{alertRes.desc}}</view>
			</view>
		</u-modal>

		<u-modal v-model="showQuestion" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="questionRes.status==1?$zhTran('取消'):$zhTran('关闭')" @cancel="showQuestion=false"
			cancel-color="rgba(38, 38, 38, 1)" border-radius="10"
			:show-confirm-button="questionRes.status==1?true:false" confirm-color="rgba(64, 115, 250, 1)"
			@confirm="questionRes.mode=='edit'?saveNewPrice(2):(questionRes.mode=='updown'?editStatusDeal():saveBatchNewPrice(2))">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix"></u-image>
				</view>

				<view class="title m-t-20">{{questionRes.title}}</view>
				<view class="desc m-t-10">{{questionRes.desc}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script type="text/javascript">
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiCloudShopGoodsLists,
		apiCloudShopEditGoodsStatus,
		apiCloudShopEditGoodsPrice,
		apiCloudShopBatchEditGoodsPrice
	} from '@/api/cloudshop'
	import category from './category.js'
	export default {
		mixins: [MescrollMixin, category],
		props: {
			scrollHeight: {
				type: [Number, String],
				default: 0
			},
			goodsStatus: {
				type: [Number, String],
				default: ''
			},
		},
		data() {
			return {
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/shop.png'),
						tip: this.$zhTran('暂无商品~'), // 提示
						fixed: true
					},
					toTop: {
						bottom: 300
					}
				},
				category: {},
				goodsList: [],
				price_symbol: '￥',
				goodsCheckedLength: 0,
				isSelectedAll: false, //是否全选
				showGoodsVisible: false,
				form: {},
				showPriceVisible: false,
				showBatchPriceVisible: false,
				showUpDown: false,
				type1: '',
				type2: '',
				updown_list: [{
						value: 1,
						label: this.$zhTran('上调')
					},
					{
						value: 0,
						label: this.$zhTran('下调')
					}
				],
				selectShow: false,
				refreshKey: true,
				alertRes: {
					status: 1,
					title: '',
					desc: ''
				},
				showResult: false,
				questionRes: {
					mode: '',
					status: 0,
					title: '',
					desc: ''
				},
				showQuestion: false,
				updownform: {}
			}
		},
		watch: {
			selectIndex: {
				handler(val) {
					if (this.selectGoodsIndex > -1 && this.category_id > -1 && this.parentClsp.lists[val].sons !=
						undefined) {
						this.category = this.parentClsp.lists[val].sons[this.selectGoodsIndex] || {}
					} else {
						this.category = this.parentClsp.lists[val] || {}
					}
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}
			},
			selectGoodsIndex: {
				handler(val) {
					if (val == undefined || this.parentClsp.lists[val].sons == undefined) return
					this.category = this.parentClsp.lists[this.selectIndex].sons[val] || {}
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}
			},
			goodsStatus: {
				handler(val) {
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}
			}
		},
		computed: {
			// 是否可全选操作
			selectAllDisabled() {
				return !!!this.goodsList.length;
			},
		},
		methods: {
			selectChoose(type1, type2) {
				this.type1 = type1
				this.type2 = type2
				this.selectShow = true
				this.refreshKey = false
				this.$nextTick(() => {
					this.refreshKey = true
				})
			},
			valueChange(e) {
				this.form[this.type1][this.type2].updown = e[0].value
				this.form[this.type1][this.type2].desc = e[0].label
				this.type1 = ''
				this.type2 = ''
			},
			// 上拉加载更多
			upCallback(page) {
				const pageNum = page.num
				const pageSize = page.size

				apiCloudShopGoodsLists({
					page_no: pageNum,
					page_size: pageSize,
					match: this.parentClsp.is_error == '' ? 1 : '',
					error_match: this.parentClsp.is_error == '' ? '' : 1,
					status: this.goodsStatus,
					store_id: this.parentClsp.clsp_id,
					category_id: this.category.id
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					// 如果是第一页需手动置空列表 
					if (page.num == 1) this.goodsList = []
					// 重置列表数据
					this.goodsList = this.goodsList.concat(lists)
					this.goodsList.forEach((item, idx) => {
						item.checked = false
					})
					this.goodsList = this.$zhTran(this.goodsList)
					this.mescroll.endBySize(lists.length, count)
					this.price_symbol = extend.price_symbol
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			editStatus(goods_id, status) {
				console.log(status)
				var gids = goods_id
				if (gids == '') {
					var garr = this.goodsList.filter(item => item.checked)
					gids = this.goodsList.map(item => item.goods_id)
				}
				this.updownform = {
					status,
					gids
				}
				this.questionRes = {
					mode: 'updown',
					status: 1,
					title: `确定${status?'上架':'下架'}？`,
					desc: `点击确定商品将会${status?'上架出售':'下架'}`
				}
				this.questionRes = this.$zhTran(this.questionRes)
				this.showQuestion = true
			},
			editStatusDeal() {
				apiCloudShopEditGoodsStatus({
					goods_id: this.updownform.gids,
					status: this.updownform.status,
					store_id: this.parentClsp.clsp_id,
				}).then(res => {
					this.alertRes = {
						status: 1,
						title: `${this.updownform.status?'上架':'下架'}成功`,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}).catch((err) => {
					this.alertRes = {
						status: 0,
						title: err,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
				}).finally(() => {
					this.refreshSelect()
				})
			},
			closePopPrice() {
				this.form = {}
				this.showPriceVisible = false
				this.showBatchPriceVisible = false
			},
			editPrice(row) {
				console.log(row)
				this.form = {
					mode: 1,
					goods_id: row.goods_id,
					image: row.goods.image,
					name: row.goods.name,
					price: row.price_strategy.price,
					icon: row.price_strategy.icon,
					price_title: row.price_strategy.price_title,
					sell_price: row.sell_price,
					service_desc: row.service_desc,
					cost: row.cost,
					profit: row.profit,
					sell_price_new: '',
					service: '',
				}
				this.showPriceVisible = true
			},
			saveNewPrice(type) {
				if (this.form.sell_price == '' && this.form.service == '') {
					this.$toast({
						title: this.$zhTran('请输入修改价格')
					})
					return
				}
				if (type == 1) {
					this.questionRes = {
						mode: 'edit',
						status: 1,
						title: `确定修改商品 ${this.form.name} 的价格？`,
						desc: '此操作将影响商品价格'
					}
					this.questionRes = this.$zhTran(this.questionRes)
					this.showQuestion = true
					return
				}
				apiCloudShopEditGoodsPrice({
					goods_ids: this.form.goods_id,
					store_id: this.parentClsp.clsp_id,
					sell_price: this.form.sell_price_new,
					service: this.form.service
				}).then(res => {
					this.alertRes = {
						status: res.status > 0 ? 0 : 1,
						title: '价格修改成功',
						desc: res.status > 0 ? '该商品移至问题商品' : ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}).catch((err) => {
					this.alertRes = {
						status: 0,
						title: err,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
				}).finally(() => {
					this.closePopPrice()
					this.refreshSelect()
				})
			},
			editPriceBatch() {
				this.form = {
					price: {
						type: '',
						amount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						},
						discount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						}
					},
					service: {
						type: '',
						amount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						},
						discount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						}
					}
				}
				this.form = this.$zhTran(this.form)
				this.showGoodsVisible = false
				this.showBatchPriceVisible = true
			},
			checkboxGroupChange(e, type) {
				if (this.form[type].type != '') {
					if (e.value) {
						this.form[type].type = e.name
						this.form[type].amount.checked = false
						this.form[type].discount.checked = false
						this.form[type][e.name].checked = true
					} else {
						this.form[type].type = ''
					}
				} else {
					this.form[type].type = e.name
					this.form[type][e.name].checked = true
				}
			},
			saveBatchNewPrice(type) {

				if (this.form.price.type == '' && this.form.service.type == '') {
					this.$toast({
						title: this.$zhTran('请选择改价信息')
					})
					return
				}

				if (this.form.price.type != '' && this.form.price[this.form.price.type].number == '') {
					this.$toast({
						title: this.$zhTran('请输入售价')
					})
					return
				}

				if (this.form.service.type != '' && this.form.service[this.form.service.type].number == '') {
					this.$toast({
						title: this.$zhTran('请输入服务费')
					})
					return
				}
				if (type == 1) {
					this.questionRes = {
						mode: 'batchedit',
						status: 1,
						title: `确定批量修改商品价格？`,
						desc: '此操作将影响商品价格'
					}
					this.questionRes = this.$zhTran(this.questionRes)
					this.showQuestion = true
					return
				}

				var garr = this.goodsList.filter(item => item.checked)
				var gids = this.goodsList.map(item => item.goods_id)
				apiCloudShopBatchEditGoodsPrice({
					goods_id: gids,
					store_id: this.parentClsp.clsp_id,
					...this.form,
				}).then(res => {
					this.alertRes = {
						status: 1,
						title: '修改成功',
						desc: '商品价格已修改成功'
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}).catch((err) => {
					this.alertRes = {
						status: 0,
						title: err,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
				}).finally(() => {
					this.closePopPrice()
					this.refreshSelect()
				})
			},
			checkGoods(idx) {
				var arr = this.goodsList[idx]
				arr.checked = !arr.checked
				this.$set(this.goodsList, idx, arr)
				this.goodsCheckedLength = this.goodsList.filter(item => item.checked).length
				if (this.goodsCheckedLength < this.goodsList.length) this.isSelectedAll = false
				if (this.goodsCheckedLength == this.goodsList.length) this.isSelectedAll = true
			},
			// 全选商品
			changeAllSelect(flag) {
				this.goodsList.forEach((item, idx) => {
					item.checked = flag == '' ? !this.isSelectedAll : flag
				})
				if (flag === false) this.isSelectedAll = false
				this.goodsCheckedLength = this.goodsList.filter(item => item.checked).length
			},
			refreshSelect() {
				this.changeAllSelect(false)
				this.showGoodsVisible = false
			},
			batchEdit() {
				if (this.goodsCheckedLength == 0) {
					this.$toast({
						title: this.$zhTran('请选择商品')
					})
					return
				}

				this.showGoodsVisible = true
			}
		},
	};
</script>

<style lang="scss" scoped>
	.goods-container {
		display: flex;
		padding: 0 20rpx;

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 20rpx;
		}
	}

	.goods {

		&--rectangle {
			flex-direction: row;
			align-items: center;
			min-height: 250rpx;
			padding: 20rpx;
			display: flex;
			border-radius: 7px;
			background-color: #ffffff;
			overflow: hidden;

			.error-desc {
				width: 100%;
				background-color: rgba(218, 35, 33, 1);
				font-size: 24rpx;
				border-radius: 4px;
			}

			.goods-images {
				box-sizing: border-box;
				width: calc(200rpx - 2 * 20rpx);
				height: calc(200rpx - 2 * 20rpx);
				border-radius: 7px;
				overflow: hidden;
				position: relative;

				.img-box {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}
			}

			.goods-content {
				margin-left: 20rpx;

				.goods-box {
					min-height: 40rpx;
				}
			}

			.price-box {
				width: 100%;

				.price-item {
					text-align: center;

					.price {
						color: rgba(255, 141, 26, 1);
						font-size: 26rpx;
						font-weight: bold;
					}

					.desc {
						color: rgba(151, 151, 151, 1);
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.strategy {
					.price {
						color: rgba(218, 35, 33, 1);
					}

					.desc {
						background-color: rgba(218, 35, 33, 1);
						color: #fff;
						font-size: 22rpx;
						padding: 5rpx 7rpx;
						border-radius: 6rpx;
					}
				}
			}

			.profit {
				width: 100%;
				background-color: rgba(242, 246, 255, 1);
				color: rgba(151, 151, 151, 1);
				font-size: 24rpx;

				text {
					color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-content {
			box-sizing: border-box;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			position: relative;
		}

		.btn-box {
			width: 100%;
			padding: 30rpx 15rpx;
			background-color: rgba(242, 246, 255, 1);

			.btn-item {
				width: calc((100% - 30rpx) / 3);
				padding: 10rpx 0;
				text-align: center;
				background-color: #fff;
				color: rgba(56, 56, 56, 1);
				border-radius: 10rpx;

				&.share {
					background-color: rgba(64, 115, 250, 1);
					color: #fff;
					height: 60rpx;
				}
			}
		}
	}


	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 20;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx constant(safe-area-inset-bottom) 24rpx;
		padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

		.all-price {
			text-align: right;
			flex: 1;
		}

		.right-btn {
			padding: 20rpx 45rpx;
			color: #fff;
			background-color: rgba(64, 115, 250, 1);
			border-radius: 10rpx;
		}
	}

	.sort-sel:active {
		color: #fff;
		background-color: rgba(64, 115, 250, 1);
	}

	.pop-goods {
		.goods--rectangle {
			padding: 0;
		}
	}

	.pop-batch-goods {

		.radio-select {
			font-size: 26rpx;
		}

		.updown {
			width: 130rpx;
		}
	}

	.price-footer {

		.btn {
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;


			&--primary {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}
		}
	}

	.pop-result {
		.title {
			font-size: 32rpx;
			color: rgba(38, 38, 38, 1);
		}

		.desc {
			font-size: 24rpx;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>